<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户列表页</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
</head>
<body>
	<!-- 搜索 -->
	<form class="layui-form" action="">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">收藏ID</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="ordDetId" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">用户账号</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="userPhone" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">商品名</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="proName" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<div class="layui-input-inline">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</div>
	</form>
	<!-- 搜索结束-->
	
	<!-- 表格容器 -->
	<table id="demo" lay-filter="test"></table>
	<script>
		layui.use([ 'table', 'form', 'laydate'], function() {
			var table = layui.table;
			var form = layui.form;
			var $ = layui.$;
			var laydate = layui.laydate;
			//第一个实例
			table.render({
				elem : '#demo',
				url : 'getWish', //数据接口
				id : 'idTest',
				page : true,//开启分页
				cols : [ [ //表头
				{
					field : 'ordDetId',
					title : '收藏id',
					width : 100,
					sort : true,
					fixed : 'left'
				}, {
					field : 'userPhone',
					title : '用户账号',
					width : 120
				}, {
					field : 'proId',
					title : '产品id',
					width : 100
				}, {
					field : 'proName',
					title : '产品名',
					width : 160
				}, {
					field : 'insertTime',
					title : '收藏时间',
					width : 160,
					sort : true
				} ] ]
			});
			//监听提交
			form.on('submit(formDemo)', function(data) {
				//layer.msg(JSON.stringify(data.field));
				table.reload('idTest', {
					where : data.field
				//设定异步数据接口的额外参数
				});
				return false;
			});
		});
	</script>
</body>
</html>
